<!DOCTYPE html>
<html>
<head>
  <title>自适应分辨率图片</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #image-container {
      width: 100vw;
      height: 100vh;
      position: relative;
    }

    #image-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    #image-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 10vw; /* 放大十倍 */
      color: white;
      background-color: rgba(0, 0, 0, 0.5);
      padding: 10px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
<div id="image-container">
  <img src="/static/img/3.jpg" alt="">
  <div id="image-caption">超市货物管理</div> <!-- 修改的部分 -->
</div>
</body>
</html>
